<template>
  <div class="page register">
    <div
      class="registerBox"
      :class="this.userAgent == 'isAndroid' ? 'pa' : 'pr'"
    >
      <input
        class="name"
        type="text"
        placeholder="请输入姓名"
        ref="name"
      >
      <input
        class="mobile"
        type="tel"
        placeholder="请输入手机号"
        ref="mobile"
      >
      <div class="codeLine clearfix">
        <input
          class="codeInput"
          type="tel"
          placeholder="点击获取验证码"
          ref="code"
        >
        <van-button
          class="code"
          type="primary"
          :disabled="this.codeDisabled"
          @click="code"
        >{{codeText}}</van-button>
      </div>
      <van-button
        class="submit"
        type="primary"
        @click="checkout(info)"
      >点击注册</van-button>
    </div>
    <van-button
      type="primary"
      class="backHome"
      @click="backHome"
    >回到首页</van-button>
  </div>
</template>

<script>
//	验证手机号
let regMobile = /^0{0,1}(13[0-9]|14(5|7|9)|15([0-3]|[5-9])|(17([0-3]|[5-9]))|(18[0-9]))+\d{8}$/;
// 验证姓名
let regName = /^[\u4e00-\u9fa5a-zA-Z]{2,10}$/;

export default {
  name: 'register',
  data () {
    return {
      info: {
        name: '',
        mobile: '',
        code: 0
      },
      flag: false,
      codeText: '获取验证码',
      codeTimer: '',
      codeDisabled: false,
      count: 10,
      currentCount: 10,
      codeNum: 0,
      userAgent: ''
    }
  },
  mounted () {
    //  处理ios中input框失去焦点留白问题
    window.addEventListener('focusout', () => {
      window.scrollBy(0, 0);
    });
    //  判断手机设备是是IOS还是Android
    let u = navigator.userAgent, app = navigator.appVersion;
    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
    let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isAndroid) {
      this.userAgent == 'isAndroid'
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    code () {
      let mobile = this.$refs.mobile.value;
      if (mobile == '') {
        this.$toast('请填写手机号！');
        return false;
      } else {
        if (!regMobile.test(mobile)) {
          this.$toast('请填写正确的手机号！');
          return false;
        } else {
          this.codeNum = this.randomNum();
          this.$toast('验证码为：' + this.codeNum);
          this.codeTimer = setInterval(() => {
            this.codeDisabled = true;
            this.codeText = `倒计时${this.currentCount}秒`;
            this.countdown();
          }, 1000);
        }
      }
    },
    countdown () {
      this.currentCount--;
      if (this.currentCount < 0) {
        this.codeText = `重新发送`;
        this.currentCount = this.count;
        this.codeDisabled = false;
        window.clearInterval(this.codeTimer);
      }
    },
    checkout (info) {
      info.name = this.$refs.name.value;
      info.mobile = this.$refs.mobile.value;
      info.code = this.$refs.code.value;
      if (info.name == '') {
        this.$toast('请填写姓名！');
        return;
      } else {
        if (!regName.test(info.name)) {
          this.$toast('请填写正确的姓名！');
          return false;
        } else {
          this.flag = true;
        }
      }
      if (info.mobile == '') {
        this.$toast('请填写手机号！');
        return false;
      } else {
        if (!regMobile.test(info.mobile)) {
          this.$toast('请填写正确的手机号！');
          return false;
        } else {
          this.flag = true;
        }
      }
      if (info.code == '') {
        this.$toast('请填写验证码！');
        return false;
      } else {
        if (info.code != this.codeNum) {
          this.$toast('验证码不正确！');
          return false;
        } else {
          this.flag = true;
        }
      }
      if (this.flag) {
        this.$toast('可提交注册');
        console.log(info);
      }
    },
    backHome () {
      this.$router.replace({ name: 'home' });
    },
    randomNum () {
      let charactors = "1234567890";
      let value = '', i;
      for (let j = 1; j <= 4; j++) {
        i = parseInt(10 * Math.random());
        value = value + charactors.charAt(i);
      }
      return value;
    }
  },
  watch: {
  },
  components: {
  },
  beforeDestroy () {
    clearInterval(this.codeTimer);
  }
}
</script>

<style lang="less" scoped>
.registerBox.pr {
  position: relative;
}
.registerBox.pa {
  position: absolute;
  top: 50%;
}
.register {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(160deg, #b100ff 20%, #00b3ff 80%);
}
.registerBox {
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  input {
    display: block;
    padding: 0.1rem;
    margin-bottom: 0.3rem;
    width: 100%;
    font-size: 0.24rem;
  }
  .submit,
  .code {
    display: block;
    margin: 0 auto;
  }
  .submit {
    margin-top: 1rem;
  }
}
.codeLine {
  input {
    float: left;
  }
  button {
    float: right;
  }
  input {
    margin-top: 2%;
    width: 60%;
  }
}
.backHome {
  position: absolute;
  top: 5%;
  left: 5%;
}
</style>